<template>
  <view class="container">
    <swiperNav
    :height="height"
    :width="width"
    :current="current"
    :nav-list="list"
    :bg-color="bgColor"
    :border-bg-color="borderBgColor"
    :active-color="activeColor"
    :color="color"
    @current-change="currentChange"
    ></swiperNav>
    <view class="content">
      <view class="att-company" v-show="current===0">
        <attCompany></attCompany>
      </view>
      <view class="att-personnel" v-show="current===1">
        <attPersonnel></attPersonnel>
      </view>
    </view>
  </view>
</template>

<script>
  import swiperNav from '@/components/wee-swiper-nav/wee-swiper-nav.vue'
  import attCompany from '@/components/att-company/att-company.vue'
  import attPersonnel from '@/components/att-personnel/att-personnel.vue'
  export default {
    components: {
      swiperNav,
      attCompany,
      attPersonnel
    },
    data () {
        return {
            list: ['家服公司', '家服人员'],
            current: 0,
            height: 100,
            width: 375,
            bgColor: '#3F51B5',
            activeColor: 'white',
            borderBgColor: 'white',
            color: '#fff'
        }
    },
    methods: {
        currentChange(e) {
            this.current = e
        }
    },
    mounted() {
        this.currentChange()
    }
  }
</script>

<style lang="scss">

</style>
